// API使用示例
// 这个文件展示了如何在Vue组件中使用封装的API

import { userApi, fishApi, monitorApi, experimentApi, uploadApi } from './api'

// 示例1: 在Vue组件中使用用户API
export const userExample = {
  // 登录示例
  async loginExample() {
    try {
      const loginData = {
        username: 'admin',
        password: '123456'
      }
      const result = await userApi.login(loginData)
      console.log('登录成功:', result)
      return result
    } catch (error) {
      console.error('登录失败:', error)
      throw error
    }
  },

  // 获取用户信息示例
  async getUserInfoExample() {
    try {
      const result = await userApi.getUserInfo()
      console.log('用户信息:', result)
      return result
    } catch (error) {
      console.error('获取用户信息失败:', error)
      throw error
    }
  }
}

// 示例2: 在Vue组件中使用鱼类API
export const fishExample = {
  // 获取鱼类列表示例
  async getFishListExample() {
    try {
      const params = {
        page: 1,
        pageSize: 10,
        keyword: '鲤鱼'
      }
      const result = await fishApi.getFishList(params)
      console.log('鱼类列表:', result)
      return result
    } catch (error) {
      console.error('获取鱼类列表失败:', error)
      throw error
    }
  },

  // 添加鱼类示例
  async addFishExample() {
    try {
      const fishData = {
        name: '鲤鱼',
        species: '鲤科',
        description: '淡水鱼类',
        image: 'fish.jpg'
      }
      const result = await fishApi.addFish(fishData)
      console.log('添加鱼类成功:', result)
      return result
    } catch (error) {
      console.error('添加鱼类失败:', error)
      throw error
    }
  }
}

// 示例3: 在Vue组件中使用监控API
export const monitorExample = {
  // 获取实时监控数据示例
  async getRealTimeMonitorExample() {
    try {
      const result = await monitorApi.getRealTimeMonitor()
      console.log('实时监控数据:', result)
      return result
    } catch (error) {
      console.error('获取实时监控数据失败:', error)
      throw error
    }
  }
}

// 示例4: 在Vue组件中使用文件上传API
export const uploadExample = {
  // 上传文件示例
  async uploadFileExample(file) {
    try {
      const onProgress = (progressEvent) => {
        const percentCompleted = Math.round(
          (progressEvent.loaded * 100) / progressEvent.total
        )
        console.log('上传进度:', percentCompleted + '%')
      }
      
      const result = await uploadApi.uploadFile(file, onProgress)
      console.log('文件上传成功:', result)
      return result
    } catch (error) {
      console.error('文件上传失败:', error)
      throw error
    }
  }
}

// 示例5: 在Vue组件中的完整使用示例
export const vueComponentExample = `
<template>
  <div>
    <el-button @click="handleLogin">登录</el-button>
    <el-button @click="handleGetFishList">获取鱼类列表</el-button>
    <el-upload @change="handleFileUpload">
      <el-button>上传文件</el-button>
    </el-upload>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { userApi, fishApi, uploadApi } from '@/utils/api'

const loading = ref(false)

// 登录处理
const handleLogin = async () => {
  loading.value = true
  try {
    const result = await userApi.login({
      username: 'admin',
      password: '123456'
    })
    ElMessage.success('登录成功')
    console.log('登录结果:', result)
  } catch (error) {
    ElMessage.error('登录失败')
    console.error('登录错误:', error)
  } finally {
    loading.value = false
  }
}

// 获取鱼类列表处理
const handleGetFishList = async () => {
  loading.value = true
  try {
    const result = await fishApi.getFishList({
      page: 1,
      pageSize: 10
    })
    ElMessage.success('获取鱼类列表成功')
    console.log('鱼类列表:', result)
  } catch (error) {
    ElMessage.error('获取鱼类列表失败')
    console.error('获取鱼类列表错误:', error)
  } finally {
    loading.value = false
  }
}

// 文件上传处理
const handleFileUpload = async (file) => {
  loading.value = true
  try {
    const result = await uploadApi.uploadFile(file.raw, (progressEvent) => {
      const percentCompleted = Math.round(
        (progressEvent.loaded * 100) / progressEvent.total
      )
      console.log('上传进度:', percentCompleted + '%')
    })
    ElMessage.success('文件上传成功')
    console.log('上传结果:', result)
  } catch (error) {
    ElMessage.error('文件上传失败')
    console.error('上传错误:', error)
  } finally {
    loading.value = false
  }
}
</script>
`

// 示例6: 使用Composition API的完整示例
export const compositionApiExample = `
<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { fishApi, monitorApi } from '@/utils/api'

// 响应式数据
const fishList = ref([])
const monitorData = ref({})
const loading = ref(false)

// 获取鱼类列表
const fetchFishList = async () => {
  loading.value = true
  try {
    const result = await fishApi.getFishList({
      page: 1,
      pageSize: 20
    })
    fishList.value = result.data || []
    ElMessage.success('获取鱼类列表成功')
  } catch (error) {
    ElMessage.error('获取鱼类列表失败')
    console.error('获取鱼类列表错误:', error)
  } finally {
    loading.value = false
  }
}

// 获取监控数据
const fetchMonitorData = async () => {
  try {
    const result = await monitorApi.getRealTimeMonitor()
    monitorData.value = result.data || {}
  } catch (error) {
    console.error('获取监控数据错误:', error)
  }
}

// 组件挂载时获取数据
onMounted(() => {
  fetchFishList()
  fetchMonitorData()
})
</script>
` 